<!-- 加工商-单据 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<u-scroll-list :indicator="false" class="p-b-0">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 前欠 </view>
						<view class="flex flex-c f-30 m-b-10"> {{ total_data.amountPayable || 0 }} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 应付 </view>
						<view class="flex flex-c f-30 m-b-10"> {{ total_data.amountPaid || 0 }} </view>
					</view>
				</view>
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 付款 </view>
						<view class="flex flex-c f-30 m-b-10"> {{ total_data.amountPayable || 0 }} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 累欠 </view>
						<view class="flex flex-c f-30 m-b-10"> {{ total_data.debtTotal || 0 }} </view>
					</view>
				</view>
			</view>
		</u-scroll-list>
		<view class="flex flex-c grey p-t-8 p-b-8">{{ time }}</view>

		<view class="list-box">
			<view class="dl-item flex" v-for="(item, index) in indexList" :key="item.billId" @click="toNext(item)">
				<view class="dt-box">
					<u-avatar fontSize="16" size="50" randomBgColor :text="item.billTypeName.substring(0, 2)"></u-avatar>
				</view>
				<view class="dd-box">
					<view class="time p-b-16 p-t-10">{{ item.businessTime }}</view>
					<view class="order-id p-b-16">{{ item.billNo }}</view>
					<view class="time p-b-16">累欠：{{ item.debtTotal }}</view>
					<view class="money f-40 red" v-if="item.amountPayable > 0">
						+{{ item.amountPayable }}
					</view>
					<view class="money f-40" v-else-if="item.amountPayable == 0">
						{{ item.amountPayable }}
					</view>
					<view class="money f-40 green" v-else>
						{{ item.amountPayable }}
					</view>
				</view>
			</view>
			<!-- <loading-finished v-if="isLoadFinished"></loading-finished> -->
			<u-loadmore dashed line :status="status" loadingText="努力加载中" loadmoreText="轻轻上拉" nomoreText="实在没有了" />
		</view>
	</view>
</template>

<script>
import { transporterListBillsPage } from "@/apis/bill/reconciliation";
import { reconciliationGorouter } from '@/utils/util.js'
// import loadingFinished from '@/components/loading-finished/index.vue'
export default {
	name: '',
	components: {
		// loadingFinished
	},
	data() {
		return {
			config: {
				title: "物流对账表",
				color: "#ffffff",
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				rightButton: [
					{
						key: "btn1",
						icon: "&#xe888;",
						position: "left",
					},
				],
			},
			total_data: {},
			params: {
				data: {},
				page: {
					current: 1,
					size: 999,
					order: "desc",
					orders: [
						{
							"column": "business_time",
							"asc": false
						}
					]
				}
			},
			indexList: [],
			time: '',
			total: 0,
			// isLoadFinished: false
			status: 'loadmore',
		}
	},
	onLoad(opt) {
		let { supplierId, supplierName, time } = opt;
		this.config.title = opt.supplierName;
		this.time = time || '';
		this.params.data = {
			supplierId, supplierName
		};
		this.getList()
	},
	onReachBottom() {
		if(this.indexList.length<this.total) {
			// this.isLoadFinished = false;
			this.status = 'loadmore'
			this.params.page.current++
			this.getList()
		} else {
			// this.isLoadFinished = true;
			this.status = 'nomore'
		}
	},
	methods: {
		clickBtn(item) {
			// if (item.key === "btn1") {
			//   this.show = true
			// }
		},
		// 列表
		getList() {
			uni.showLoading({
				title: '加载中...'
			})
			transporterListBillsPage(this.params).then(res => {
				if (!res.flag) return;
				const data = res.data || {};
				this.total_data = data.footerTotal || {};
				this.total = data.total || 0;
				if (this.params.page.current == 1) {
					this.indexList = data.records;
				} else {
					this.indexList = [...data.records, ...this.indexList];
				}
				uni.hideLoading()
			}).catch(() => {
				uni.hideLoading()
			})
		},
		// 跳转根据业务类型跳转对应的页面：收款-收款单；销售-销售开单；采购-来货结算；付款-付款单；
		toNext(val) {
			reconciliationGorouter(val.billType, val.billId, this)
		}
	},
	mounted() {

	}
}

</script>

<style lang="scss" scoped>
.top-view {
	flex: 1;
	background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	color: #fff;

	.t_item {
		flex: 1;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			right: 0;
			top: 0;
			width: 1rpx;
			height: 70%;
			background: #dfdfdf;
		}

		&:last-child {
			&::after {
				content: "";
				width: 0rpx;
			}
		}
	}
}

.list-box {
	padding: 0 20rpx 40rpx;

	.dl-item {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 10rpx 20rpx #dfdfdf;
		align-items: center;
		margin-bottom: 20rpx;

		.dd-box {
			flex: 1;
			position: relative;
			color: #999;
			padding-left: 20rpx;

			.money {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
}
</style>